<template>
  <el-container :style="{ height: $store.state.mainContainerHeight - 40 + 'px' }">
    <el-main>
      <el-container>
        <el-main>
          <el-card class="photo-config-item">
            <div slot="header">
              影楼信息
            </div>
            <el-form
              ref="form"
              label-width="180px"
              :model="studioForm.formData"
              :rules="studioForm.rules"
              style="overflow-x:auto;"
            >
              <el-form-item
                label="名称"
                prop="name"
              >
                <el-input
                  style="width: 220px"
                  placeholder="名称"
                  v-model.trim="studioForm.formData.name"
                  maxlength="50"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item
                label="电话"
                prop="tel"
              >
                <el-input
                  style="width: 220px"
                  placeholder="电话"
                  v-model.trim="studioForm.formData.tel"
                  maxlength="50"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item
                label="地址"
                prop="address"
              >
                <el-input
                  style="width: 350px"
                  placeholder="地址"
                  v-model.trim="studioForm.formData.address"
                  maxlength="150"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item
                label="等级"
                prop="level"
              >
                <el-select
                  v-model="studioForm.formData.level"
                  placeholder="等级"
                  filterable
                  clearable
                  :loading="selectLoading"
                  @focus="getLevelSelect"
                >
                  <el-option
                    v-for="item in levels"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  ></el-option>
                </el-select>
                  <div class="tips">不选则为默认等级</div>
              </el-form-item>

              <el-form-item
                label="等级结束时间"
                prop="levelEndTime"
              >
                <el-date-picker
                  v-model="studioForm.formData.levelEndTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
                <div class="tips">达到结束时间后，该影楼等级会默认变成普通</div>
              </el-form-item>

              <el-form-item
                label="是否启用"
                prop="enable"
              >
                <el-select
                  v-model="studioForm.formData.enable"
                  value-key="name"
                  placeholder="状态"
                >
                  <el-option
                    v-for="(item, key) in $CONST.ACTIVE_STATUS"
                    :key="key"
                    :label="item.title"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

            </el-form>
          </el-card>
        </el-main>
      </el-container>
    </el-main>

    <el-footer>
      <el-row
        type="flex"
        justify="center"
      >
        <el-button
          style="margin-right: 100px"
          @click="gotoList"
          v-waves
        >返回</el-button>
        <el-button
          type="primary"
          :loading="studioForm.loading"
          @click="onSubmit"
          v-waves
        >{{ this.studioForm.loading ? "提交中" : "保存" }}</el-button>
      </el-row>
    </el-footer>

  </el-container>
</template>

<script>
import studioAPI from '@/api/photoStudio'
import levelAPI from '@/api/level'
import { mapGetters } from 'vuex'
export default {
  props: ['id'],
  name: 'info',
  components: {},
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '一周后',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          },
          {
            text: '30天后',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一年后',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 365)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      selectLoading: false,
      dialogVisible: false,
      levels: [],
      studioForm: {
        formData: {
          id: null,
          name: null,
          levelId: null
        },
        loading: false,
        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          tel: [{ required: true, message: '请输入电话', trigger: 'blur' }]
        }
      }
    }
  },
  async created () {
    if (this.isEditMode) {
      await this.getLevelSelect()
      const res = await studioAPI.getById(this.id)
      this.studioForm.formData = JSON.parse(JSON.stringify(res.data))
    }
  },
  computed: {
    ...mapGetters(['token']),
    isEditMode () {
      return this.id && this.id > 0
    }
  },
  methods: {
    /**
     * 查询影楼下拉框信息
     */
    getLevelSelect (keyword) {
      if (this.studioForm.formData.level) {
        return
      }
      this.selectLoading = true
      levelAPI
        .getAll({ showLoading: false })
        .then((res) => {
          this.levels = res.data
          this.selectLoading = false
        })
        .catch((e) => {
          this.selectLoading = false
        })
    },
    handleSpec () {
      this.addLoad = true
      this.$refs.photoSpecsForm.validate((valid) => {
        if (valid) {
          this.studioForm.formData.photoSpecs.push(
            Object.assign({}, this.photoSpecsFormData)
          )
          this.dialogVisible = false
        }
        this.addLoad = false
      })
    },
    photoSpecsReset () {
      this.$nextTick(() => {
        this.$refs.photoSpecsForm.resetFields()
      })
    },
    gotoList () {
      this.$router.pushTo(this.$router.routesConfig.goodsList)
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.studioForm.loading = true
        if (this.id) {
          studioAPI
            .update(this.studioForm.formData)
            .then(() => {
              this.studioForm.loading = false
              this.gotoList()
            })
            .catch(() => (this.studioForm.loading = false))
        } else {
          studioAPI
            .insert(this.studioForm.formData)
            .then(() => {
              this.studioForm.loading = false
              this.$message.success('添加影楼成功')
              this.gotoList()
            })
            .catch(() => (this.studioForm.loading = false))
        }
      })
    }
  }
}
</script>
